<template>
  <div id="personInfo">
    <el-row>
      <el-col :span="24" class="background">
        <div class="title">
          <p>个人信息</p>
        </div>
      </el-col>
    </el-row>
    <el-form :model="personinfoData" :rules="personinfoRules" ref="personalform" label-width="120px" class="form-box">
      <el-row>
        <el-col :span="12" calss="form-left">
          <el-form-item label="姓名：" prop="real_name">
            <el-input v-model="personinfoData.real_name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="民族：" prop="nation">
            <el-select v-model="personinfoData.nation" placeholder="请选择" style="width: 100%;" size="small">
              <el-option v-for="(item, index) in nationList" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学历：" prop="end_education">
            <el-select v-model="personinfoData.end_education" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in educationList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身高：" prop="height">
            <el-input-number :controls="false" v-model="personinfoData.height" size="small" style="width: 100%;">
            </el-input-number>
          </el-form-item>
          <el-form-item label="性别：" prop="sex">
            <el-select v-model="personinfoData.sex" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in sexList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="QQ：" prop="qq">
            <el-input v-model="personinfoData.qq" style="width: 100%;" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" calss="form-right">
          <el-form-item label="出生日期：" prop="birthday" required>
            <el-date-picker v-model="personinfoData.birthday" style="width: 100%;" size="small"></el-date-picker>
          </el-form-item>
          <el-form-item label="工作时间：" prop="work_start_date" required>
            <el-date-picker v-model="personinfoData.work_start_date" style="width: 100%;" size="small"></el-date-picker>
          </el-form-item>
          <el-form-item label="现居住地：" prop="livings" :required="true">
            <el-cascader change-on-select v-model="personinfoData.livings" :options="placeList" style="width: 100%"
                         :props="prop"></el-cascader>
          </el-form-item>
          <el-form-item label="政治面貌：" prop="political">
            <el-select v-model="personinfoData.political" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in politicalList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状态：" prop="marriage">
            <el-select v-model="personinfoData.marriage" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in marriageList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="户籍所在地：" prop="native_places" :required="true">
            <el-cascader change-on-select v-model="personinfoData.native_places" :options="placeList"
                         style="width: 100%" :props="prop"></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="自我测评：" prop="evaluation">
        <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入自我测评"
                  v-model="personinfoData.evaluation"></el-input>
      </el-form-item>
      <el-form-item class="loadphoto">
        <UploadImageCard :config="config" @sendUploadImageResponse="sendUploadImage"
                         :defaultImageUrl="personinfoData.portrait_url"></UploadImageCard>
      </el-form-item>
    </el-form>
    <div class="inner-center">
      <el-button type="success" @click="checkFormData()">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import UploadImageCard from '@/components/common/UploadImageCard'

  export default {
    name: 'personInfo',
    data () {
      var checkDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else {
          callback()
        }
      }
      return {
        config: {
          type: 'HeadPortrait',
          width: '150px',
          height: '150px',
        },
        personinfoData: {
          real_name: '',
          sex: 0,
          birthday: '',
          nation: '',
          native_places: [],
          livings: [],
          work_start_date: '',
          marriage: 0,
          political: '',
          evaluation: '',
          height: 150,
          qq: '',
          end_education: '',
        },
        personinfoRules: {
          real_name: [
            {required: true, message: '请填写您的姓名', trigger: 'blur'},
            {min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'change'}
          ],
          work_start_date: [
            {validator: checkDate, trigger: 'change'}
          ],
          qq: [
            {min: 0, max: 15, message: '不能超过15位', trigger: 'change'}
          ],
          birthday: [
            {validator: checkDate, trigger: 'change'}
          ],
          nation: [
            {required: true, message: '请选择您的民族', trigger: 'blur'}
          ],
          evaluation: [
            {min: 0, max: 120, message: '不能超过120位', trigger: 'change'}
          ]
        },
        prop: {
          value: 'label',
          label: 'label'
        },
        sexList: [],
        politicalList: [],
        educationList: [],
        marriageList: [],
        placeList: [],
        nationList: [],
      }
    },
    mounted () {
      this.updateComponent()
    },
    created () {
      this.createComponent()
    },
    methods: {
      createComponent () {
        this.getComboboxList()
      },
      updateComponent () {
        this.getPersonInfoToServer()
      },
      sendUploadImage (data) {
        console.log(data)
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.personinfoData.portrait_url = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      getComboboxList () {
        this.sexList = getStaticMapList('sex')
        this.politicalList = getStaticMapList('political')
        this.educationList = getStaticMapList('education')
        this.marriageList = getStaticMapList('marriage')
        let _this = this
        postDataToServer('PROVINCE_LISTCASCADE').then((data) => {
          if (data.status === 0) {
            _this.placeList = data.data_list
          }
        }).then(() => {
          postDataToServer('NATION_LISTALL').then((data) => {
            if (data.status === 0) {
              _this.nationList = data.data_list
            }
          })
        })
      },
      getPersonInfoToServer () {
        let _this = this
        postDataToServer('PERSONAL_GET').then((data) => {
          if (data.status === 0) {
            _this.personinfoData = data.data_list
            if (data.data_list.native_place.split('/')) {
              _this.personinfoData.native_places = data.data_list.native_place.split('/')
            }
            if (data.data_list.living.split('/')) {
              _this.personinfoData.livings = data.data_list.living.split('/')
            }
          }
        })
      },
      checkFormData () {
        let _this = this
        this.$refs['personalform'].validate((valid) => {
          if (valid) {
            _this.saveFormData()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })
          }
          _this.$emit('sendMessageToparent', 'null')
        })
      },
      saveFormData () {
        let _this = this
        _this.personinfoData.birthday = formatterTime('date', _this.personinfoData.birthday)
        _this.personinfoData.work_start_date = formatterTime('date', _this.personinfoData.work_start_date)
        _this.personinfoData.native_place = _this.personinfoData.native_places.join('/')
        _this.personinfoData.living = _this.personinfoData.livings.join('/')
        delete _this.personinfoData.livings
        delete _this.personinfoData.native_places
        postDataToServer('PERSONAL_EDIT', this.personinfoData).then((data) => {
          if (data.status === 0) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            // _this.$router.push({ 'path':'/index/home' });
          } else {
            this.$message({
              message: data.message,
              type: 'error'
            })
          }
          _this.getPersonInfoToServer()
        }).catch((error) => {
          this.$message({
            message: '保存失败，请检查网络或联系管理员！',
            type: 'error'
          })
          _this.getPersonInfoToServer()
        })
        // this.getPersonInfoToServer();
      }
    },
    components: {
      UploadImageCard
    },
    watch: {}
  }
</script>

<style scoped>
  #personInfo {
    padding: 20px;
  }

  .background {
    margin-left: 0.5em;
    margin-top: 0.9em;
    background-color: #FAFAFA;
  }

  .title {
    border-bottom: 1px solid #F2F2F2;
    padding: 0.5em;
    color: #575B6A;
    font-size: 1.3em;
  }

  .form-box {
    width: 95%;
    text-align: left;
    margin-top: 1em;
  }

  .inner-center {
    text-align: center;
  }
</style>
